
import React, {  useEffect, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Header, RouterView } from 'src/components'
import { CHOOSE_ADDRESS } from 'src/redux/action-type'
import { useQuery } from 'src/utils/hooks'
import classNames from 'classnames'
import { getAddressList } from 'src/api/getData'
import routerData from '../routerData'
import './index.scss'


const ChooseAddress = () => {
    const history = useHistory();
    const query = useQuery();
    const dispatch = useDispatch();
    const { userInfo, addressIndex } = useSelector(state => state);
    const [deliverable, setDeliverable] = useState([]); //有效地址列表
    const [deliverdisable, setDeliverdisable] = useState([]); //无效地址列表


    useEffect(() => {
        //初始化信息
        const initData = async () => {

            let deliverableNew = [], deliverdisableNew = [];

            if (userInfo && userInfo.user_id) {
                let addressList = await getAddressList(userInfo.user_id);
                //将当前所有地址访问有效无效两种
                addressList.forEach(item => {
                    if (item.is_deliverable) {
                        deliverableNew.push(item);
                    } else {
                        deliverdisableNew.push(item);
                    }
                })
                setDeliverable(deliverableNew)
                setDeliverdisable(deliverdisableNew)
                // 
                //     new BScroll('#scroll_section', {  
                //         deceleration: 0.003,
                //         bounce: true,
                //         swipeTime: 1800,
                //     }); 
                //
            }
        }

        initData();
    }, [userInfo])

    const iconColor = (name) => {
        switch (name) {
            case '公司': return '#4cd964';
            case '学校': return '#3190e8';
            default: return '#3190e8'
        }
    }
    //选择地址
    const chooseAddress = (address, index) => {
        dispatch({
            type: CHOOSE_ADDRESS,
            address,
            id: query.id
        })
        history.go(-1);
    }


    return <div className="page_confirmorder_chooseaddress">
        <Header title="选择地址" goBack />
        <Link to="/confirmOrder/chooseAddress/addAddress" className="add_icon_footer" >
            <img src="/images/add_address.png" height="24" width="24" alt="" />
            <span>新增收货地址</span>
        </Link>
        <section id="scroll_section" className="scroll_container">
            <section className="list_cotainer">
                <ul className="deliverable_address">
                    {
                        deliverable.map((item, index) => {
                            return <li key={index} onClick={() => chooseAddress(item, index)}>
                                <svg className={classNames('choosed_address', { default_address: index === addressIndex || 0 })}>
                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                                </svg>
                                <div>
                                    <header>
                                        <span>{item.name}</span>
                                        <span>{item.sex === 1 ? '先生' : '女士'}</span>
                                        <span>{item.phone}</span>
                                    </header>
                                    <div className="address_detail ellipsis">
                                        {item.tag && <span style={{ backgroundColor: iconColor(item.tag) }}>{item.tag}</span>}
                                        <p>{item.address_detail}</p>
                                    </div>
                                </div>
                            </li>
                        })
                    }
                </ul>
                {
                    deliverdisable.length > 0 && <section id="out_delivery">
                        <header className="out_header">以下地址超出配送范围</header>
                        <ul className="deliverable_address">
                            {
                                deliverdisable.map((item, index) => {
                                    return <li key={index}>
                                        <svg className="choosed_address">
                                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                                        </svg>
                                        <div>
                                            <header>
                                                <span>{item.name}</span>
                                                <span>{item.sex === 1 ? '先生' : '女士'}</span>
                                                <span>{item.phone}</span>
                                            </header>
                                            <div className="address_detail ellipsis">
                                                {item.tag && <span style={{ backgroundColor: '#ccc', color: '#fff' }}>{item.tag}</span>}
                                                <p>{item.address_detail}</p>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </section >
                }
            </section >
        </section >

        <RouterView data={routerData} />
    </div >
}

export default ChooseAddress